<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %> 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCEj5KDUiTWEGXQFnwTFUx5t-iFISVDSHM&sensor=false&region=KR">
</script>
<script type="text/javascript">
(function() {
	  var po = document.createElement('script'); 
	  po.type = 'text/javascript'; po.async = true;
	  po.src = 'https://apis.google.com/js/client:plusone.js';
	  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
<title><tiles:getAsString name="title"/></title>
<script type="text/javascript">
$(document).ready(function(){
	$("#container").css({
		"position":"absolute",
		"top":"0",
		"left":"0",
		"margin-left":"auto",
		"margin-right":"auto",
		"width": $(document).width(),
		"height": $(document).height(),
		"background-color":"white",
	});
	$("#top").css({
		"padding-left":"10px",
		"background-color":"#242424"
	});
	$("div").css({
		"text-decoration":"none",
		"font-family":"\"Helveltica\",\"HYGothic\"",
		"font-weight":"600",
		"text-align":"center"
	});
	$("a.menu").css({
		"text-decoration":"none",
		"font-family":"\"Helveltica\",\"HYGothic\"",
		"color":"#C8C8C8",
		"font-weight":"600",
		"margin-right":"15pt"
	});
	$("#header").css({
		"font-size":"25pt"
	});
	$("#content").css({
		"font-size":"30px"
	});
	$("#footer").css({
		"width": $(document).width(),
		"position":"absolute",
		"padding-left":"auto",
		"padding-right":"right",
		"top":$(document).height() - 20,
		"text-align":"center"
	});
});
</script>
</head>
<body>
<div id="container" >
	<div id="top" >
		<tiles:insertAttribute name="top"/>
	</div>
	<div id="header">
		<tiles:insertAttribute name="header"/>
	</div>
	
	<div id="content" >
		<div id="map" >
			<tiles:insertAttribute name="map"/>
		</div>
		<div id="main">
			<tiles:insertAttribute name="main"/>
		</div>
	</div>
	
	<div id="footer" >
		<tiles:insertAttribute name="footer"/>
	</div>
</div>

</body>
</html>